<template>
  <div class="musicScore-ranking">
    <ul>
      <li v-for="(i, index) in list" :key="i.id">
        <span class="rankNum">{{ index + 1 }}</span>
        <a
          :underline="false"
          class="musicScore-title"
          @click="GoMusicScoreDetail(i)"
          >{{ i.music_score_title }}</a
        >
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MusicScoreRanks',
  data() {
    return {}
  },
  props: {
    list: {
      type: Array,
      required: true
    },
    type: {
      type: String,
      required: true
    }
  },
  mounted() {},
  methods: {
    GoMusicScoreDetail(musicScore) {
      this.$router.push(`/musicScoreDetail/${musicScore.id}`)
    }
  }
}
</script>

<style scoped>
.musicScore-ranking {
  width: 100%;
  /* margin-top: 20px; */
}

.musicScore-ranking ul {
  list-style: none;
  padding: 0;
}

.musicScore-ranking li {
  display: flex;
  /* justify-content: space-between; */
  /* align-items: center; */
  margin-bottom: 15px;
  /* font-family: none; */
  font-size: 14px;
}
.rankNum {
  color: #9090ab;
}
.musicScore-ranking .musicScore-title {
  margin-left: 10px;
  color: #888888;
  cursor: pointer;
}
.musicScore-ranking .musicScore-title:hover {
  color: #0077fa;
}
</style>
